Nested Components in React JS

Nested Components are an important concept in React JS that allows developers to build complex user interfaces by placing one component inside another. React applications are created by combining smaller, reusable components into larger components. For example, a website can contain a Header, Navbar, Sidebar, Content, and Footer component, all organized within a main App component.

Course Link: JustAcademy React JS Training Course

Demo Link: Register for React JS Course Demo

1. What Are Nested Components?

Nested components are React components rendered inside other React components. A component that renders another component is commonly called the parent component, while the rendered component is called the child component.

For example, an App component can render a Header component, a Content component, and a Footer component. Each of these components can contain other components, forming a component hierarchy.

Example

function Header() {
  return <h1>Welcome to React JS</h1>;
}

function Content() {
  return <p>Learn how to build reusable UI components.</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

export default App;

Explanation:

• Header displays the page heading.
• Content displays the paragraph.
• App renders both components inside a parent div.
• Header and Content are child components of App.

Result: The browser displays the heading followed by the paragraph.

2. Why Do We Use Nested Components?

• Code reusability: Reuse the same component in different sections of an application.
• Better organization: Divide large interfaces into smaller, understandable parts.
• Maintainability: Update one component without rewriting the entire page.
• Readability: Make the structure of the user interface easier to understand.
• Scalability: Add new features without placing all the code in a single component.
• Consistency: Reuse common elements such as buttons, cards, headers, and navigation bars.
• Component composition: Combine small components to create larger interfaces.

3. Understanding Parent and Child Components

A parent component is a component that renders one or more other components. A child component is rendered inside the parent component's JSX.

Example

function Child() {
  return <h2>I am the Child Component</h2>;
}

function Parent() {
  return (
    <div>
      <h1>I am the Parent Component</h1>
      <Child />
    </div>
  );
}

export default Parent;

Explanation: The Parent component renders its own heading and then renders the Child component using .

Important Points

• A parent can render multiple child components.
• A child component can receive data from its parent through props.
• A component can be reused in different parent components.
• Nested components form a hierarchy known as the component tree.

4. How to Create Nested Components

Follow these steps to create nested components in React JS.

Step 1: Create a Child Component

function Message() {
  return <p>This is a child component.</p>;
}

Step 2: Create a Parent Component

function App() {
  return (
    <div>
      <h1>Nested Components Example</h1>
      <Message />
    </div>
  );
}

Step 3: Export the Main Component

export default App;

Complete Code

function Message() {
  return <p>This is a child component.</p>;
}

function App() {
  return (
    <div>
      <h1>Nested Components Example</h1>
      <Message />
    </div>
  );
}

export default App;

In this example, both components are declared at the top level of the file. The Message component is rendered inside App, creating a parent-child relationship.

5. Nesting Multiple Components

A parent component can contain several child components. This is useful for building complete website layouts.

Example

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Navbar() {
  return <nav>Home | About | Services</nav>;
}

function MainContent() {
  return <main><p>Welcome to our website.</p></main>;
}

function Footer() {
  return <footer>Copyright 2026</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Navbar />
      <MainContent />
      <Footer />
    </div>
  );
}

export default App;

Explanation: The App component combines four smaller components. Each child has a specific responsibility, making the page easier to manage.

6. Nested Components with Props

Props allow parent components to pass information to child components. This makes nested components flexible and reusable.

Example

function Student({ name, course }) {
  return (
    <div>
      <h2>Student Name: {name}</h2>
      <p>Course: {course}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Student Details</h1>
      <Student name="Aarav" course="React JS" />
      <Student name="Priya" course="JavaScript" />
    </div>
  );
}

export default App;

Explanation:

• The App component passes name and course to Student.
• The Student component receives these values through props.
• The same Student component is reused with different data.

Important: Props are read-only inputs. A child component should not modify its props directly.

7. Nesting Components with the children Prop

The special children prop lets a parent pass JSX content between the opening and closing tags of another component. This pattern is commonly used for cards, panels, layouts, and reusable containers.

Example

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card>
        <h2>React JS</h2>
        <p>Learn component composition.</p>
      </Card>

      <Card>
        <h2>JavaScript</h2>
        <p>Learn JavaScript fundamentals.</p>
      </Card>
    </div>
  );
}

export default App;

Explanation: Card is a reusable wrapper component. The content inside each Card is passed through the children prop.

8. Nested Components Across Separate Files

In larger React applications, components are often placed in separate files and imported into their parent components.

Folder Structure

src/
  components/
    Header.jsx
    Navbar.jsx
    Footer.jsx
  App.jsx

Header.jsx

export default function Header() {
  return <header><h1>My React Website</h1></header>;
}

Navbar.jsx

export default function Navbar() {
  return <nav>Home | About | Contact</nav>;
}

Footer.jsx

export default function Footer() {
  return <footer>Website Footer</footer>;
}

App.jsx

import Header from './components/Header.jsx';
import Navbar from './components/Navbar.jsx';
import Footer from './components/Footer.jsx';

function App() {
  return (
    <div>
      <Header />
      <Navbar />
      <main>
        <h2>Main Content</h2>
      </main>
      <Footer />
    </div>
  );
}

export default App;

Explanation: Each component is exported from its own file and imported into App.jsx. App then nests these components in the desired layout.

9. Understanding the React Component Tree

A component tree is a hierarchical representation of how components are nested inside one another.

Example Component Tree

App
├── Header
│   ├── Logo
│   └── Navbar
├── MainContent
│   ├── Sidebar
│   └── Article
└── Footer

In this structure:

• App is the root component of this example hierarchy.
• Header, MainContent, and Footer are children of App.
• Logo and Navbar are children of Header.
• Sidebar and Article are children of MainContent.

This hierarchy makes it easier to understand how a page is assembled from smaller components.

10. Nested Components with Lists

You can nest components inside list-rendering expressions to display repeated data, such as products, students, or employees. Each sibling component generated from a list should have a stable key.

Example

function ProductCard({ name, price }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Price: ₹{price}</p>
    </article>
  );
}

function ProductList() {
  const products = [
    { id: 1, name: 'Keyboard', price: 1200 },
    { id: 2, name: 'Mouse', price: 600 },
    { id: 3, name: 'Monitor', price: 8500 }
  ];

  return (
    <section>
      <h1>Products</h1>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
        />
      ))}
    </section>
  );
}

export default ProductList;

Explanation: ProductList maps over the products array and renders a ProductCard for each item. The key helps React identify each sibling item when the list changes.

11. Conditional Rendering of Nested Components

Conditional rendering allows React to display a child component only when a particular condition is true.

Example

function Dashboard() {
  return <h2>Welcome to your dashboard.</h2>;
}

function LoginMessage() {
  return <p>Please log in to continue.</p>;
}

function App() {
  const isLoggedIn = true;

  return (
    <div>
      <h1>User Portal</h1>
      {isLoggedIn ? <Dashboard /> : <LoginMessage />}
    </div>
  );
}

export default App;

Explanation: If isLoggedIn is true, React renders Dashboard. Otherwise, it renders LoginMessage.

12. Nested Components and State

A child component can maintain its own state using Hooks such as useState. When that state changes, React updates the relevant UI.

Example

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((previous) => previous + 1)}>
        Increase
      </button>
    </div>
  );
}

function App() {
  return (
    <main>
      <h1>Counter Application</h1>
      <Counter />
    </main>
  );
}

export default App;

Explanation: App renders Counter as a child. Counter manages its own count state and updates the displayed value when the button is clicked.

Note: State belongs to a particular position in the rendered component tree. Defining a component inside another component can cause React to treat it as a new component type on every render, potentially resetting state. Define components at the top level of the module instead.

13. Component Nesting vs. Nested Component Definitions

These two ideas are different and should not be confused.

Incorrect Pattern: Defining a Component Inside Another Component

function App() {
  function Child() {
    return <p>Hello</p>;
  }

  return <Child />;
}

Although JavaScript permits this function declaration, it is not recommended for React component definitions. The Child component is recreated when App renders, which can lead to unnecessary remounting and state loss.

Correct Pattern: Define Components at the Top Level

function Child() {
  return <p>Hello</p>;
}

function App() {
  return <Child />;
}

export default App;

If Child needs information from App, pass that information through props instead of defining Child inside App.

14. Common Mistakes When Using Nested Components

15. Best Practices for Nested Components

• Break complex user interfaces into small, logical components.
• Use descriptive component names such as Header, ProductCard, and Sidebar.
• Define component functions at the top level of the module.
• Use props to pass information from parent components to child components.
• Use the children prop when a reusable wrapper needs to display nested content.
• Keep each component focused on a clear responsibility.
• Use stable keys when rendering components from arrays.
• Keep reusable components in separate files when that improves organization.
• Use conditional rendering to display components based on application state or props.
• Avoid unnecessary nesting that makes the component tree difficult to understand.
• Use semantic HTML and accessible controls inside components.
• Test the behavior of components individually and as part of the complete interface.

16. Practical Project: Simple Website Layout

In this project, you will create a website layout using nested React components.

Header.jsx

export default function Header() {
  return (
    <header>
      <h1>My Learning Website</h1>
    </header>
  );
}

Sidebar.jsx

export default function Sidebar() {
  return (
    <aside>
      <h2>Courses</h2>
      <ul>
        <li>React JS</li>
        <li>JavaScript</li>
        <li>HTML and CSS</li>
      </ul>
    </aside>
  );
}

Content.jsx

export default function Content() {
  return (
    <section>
      <h2>Welcome to React Learning</h2>
      <p>Learn how to create reusable components.</p>
    </section>
  );
}

Footer.jsx

export default function Footer() {
  return <footer><p>Keep Learning!</p></footer>;
}

App.jsx

import Header from './Header.jsx';
import Sidebar from './Sidebar.jsx';
import Content from './Content.jsx';
import Footer from './Footer.jsx';

export default function App() {
  return (
    <div>
      <Header />
      <div className="page-layout">
        <Sidebar />
        <Content />
      </div>
      <Footer />
    </div>
  );
}

Project Explanation

1. Header displays the website title.
2. Sidebar displays a list of courses.
3. Content displays the main learning information.
4. Footer displays the closing message.
5. App imports and nests all four components into one page layout.

You can extend this project by adding CSS, navigation, a course-details page, and interactive components.

17. Interview Questions and Answers

Q1. What are nested components in React?

Nested components are components rendered inside other components to build a hierarchical user interface.

Q2. What is a parent component?

A parent component is a component that renders one or more child components.

Q3. What is a child component?

A child component is a component rendered within another component's JSX.

Q4. Why are nested components useful?

They improve reusability, organization, readability, maintainability, and scalability.

Q5. Can a component contain multiple child components?

Yes. A component can render multiple child components in the order required by the UI.

Q6. How can a parent pass data to a child component?

A parent passes data through props, which the child reads as inputs.

Q7. What is a component tree?

A component tree represents the hierarchy of components in an application, from a root component to its descendants.

Q8. What is the children prop?

The children prop represents content placed between a component's opening and closing tags.

Q9. Is it recommended to define a component inside another component?

Generally, no. Define components at the module's top level to avoid recreating component types during parent renders.

Q10. Can nested components be stored in separate files?

Yes. Components can be exported from separate files and imported into parent components.

Q11. Can a child component have its own state?

Yes. A function component can use Hooks such as useState to manage its own state.

Q12. What is the difference between component nesting and nested component definitions?

Component nesting means rendering one component inside another. Nested component definitions mean declaring a component function inside another component function, which is generally discouraged.

18. Revision Checklist

• Understand the meaning of nested components.
• Know the difference between parent and child components.
• Practice rendering multiple components inside a parent.
• Understand how props pass data to child components.
• Know how to use the children prop.
• Understand component trees and hierarchical layouts.
• Practice importing components from separate files.
• Understand list rendering and stable keys.
• Know how to conditionally render nested components.
• Understand why component definitions should remain at the top level.
• Practice creating a complete page from reusable components.

19. Official React Documentation

• Your First Component - React Documentation
• Importing and Exporting Components - React Documentation
• React Learn Documentation

Conclusion

Nested Components help developers build organized and reusable React applications by combining smaller components into larger interfaces. By understanding parent-child relationships, props, the children prop, component trees, and proper component organization, you can create maintainable websites and applications with React JS.

To learn more about React JS, visit the JustAcademy React JS Training Course or register for a React JS course demo.